import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-regional-contain-power-item',
  templateUrl: './regional-contain-power-item.component.html',
  styleUrls: ['./regional-contain-power-item.component.css']
})
export class RegionalContainPowerItemComponent implements OnInit,OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    if(this.data&&changes['data']){
      this.initChart()
    }
  }

  constructor() { }

  ngOnInit() {
    // this.initChart();
  }


  public chartOptions
  public chartOptions2
  @Input() data:any
  @Input() itemName:any


  private initChart() {
    let itemName = this.itemName
    let initData = this.data;
    let data = {
      color: initData[1].color,
      data: initData[1].data,
      name: initData[1].name,
      pointPadding: initData[0].pointPadding
    }
    this.chartOptions = {
      chart: {
        type: 'column',
        marginBottom: 0
      },
      title: {
        text: null
      },
      xAxis: {
        categories: itemName,
        opposite: false
      },
      yAxis: [{
        min: 0,
        title: {
          text: '发电量(万kwh)'
        }
      }],
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.3f}万kwh</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
      },
      plotOptions: {
        column: {
          grouping: false,
          shadow: false,
          borderWidth: 0
        }
      },
      series: [initData[0]]
    }
    this.chartOptions2 = {
      chart: {
        type: 'column',
        marginTop: 1
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: itemName,
        opposite: true,
      },
      yAxis: [{
        title: {
          text: '装机容量(MW)'
        },
        opposite: false,
        reversed: true,
      }],
      legend: {
        enabled: false
      },
      credits: {
        enabled: false
      },
      tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td ><span style="color:{series.color};padding:0">●</span>{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.3f}MW</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true,
        style: {
          width: '580px'
        }
      },
      plotOptions: {
        column: {
          grouping: false,
          shadow: false,
          borderWidth: 0
        }
      },
      series: [data]
    }
  }
}